<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<!-- 文本格式化属性针对文本相关操作（四种方式10个属性）
	      1.控制字体：font-family 、font-size、font-weight
		  2.控制文体布局：text-aglin、line-height、letter-spacing、word-spacing
		  3.文本修饰属性：text-decoration、 text-shadow
		  4.处理文本效果： white-space
		 -->
		 <style>
			 /* css3语法：选择器{
				          属性： 属性值；
						  属性： 属性值；
						  。。。。
						  }
						  叫法：一个样式	      
			 */
			 bod y div#a{ /* 通过加权方式，锁定元素 权值：102  */
				color: #55ffff;
				/* 知识点1：文本格式化属性控制字体 
				font-family:字体家族，指定字体形式
				*/
				font-family: 楷体,sans-serif;
				/* 设置多个字体：浏览器会按照顺序寻找可用字体
				 用户体验，用户系统有什么字体，优先指定字体
				  通常与统配选择器使用  *{}
				 */
				/* 知识点2：文本格式化属性控制字体
				  font-size：字体大小属性，与单位共存
				  单位  px   像素/em 相对单位  理解：倍数   1em=16px
				                    使用特点：相对与元素按照倍数方式、移动端									
				  */
				 /* 知识点3：文本格式化属性控制字体
				  font-weight: ;字体粗细属性。不存在单位
				              属性值：数值【100 200 300  ... 900】
							          常用数值：400
							         单词【400==normal、bold、light】
					使用方法：统配选择器搭配使用：指定全局字体正常字体粗细				 
				  */
				 font-weight: normal;
				 text-align: center;
				 font-size: 2em;
				 /* 补充：1.英文大写；2.首字母大写 ；3.段落开始间距200px*/
				 text-transform: uppercase;
				 text-transform: capitalize;
				 text-indent: 200px;
			}
			
			 div#a{   /*通过加权方式，锁定元素  权值：101  */
				color: #ff0000;
			/* 知识点4：文本格式化属性控制文本格式 【对齐、间隙】
		 	text-align：文本对其属性
		    left/right/center/justify:两端对齐，用于弹性布局
			*/
				text-align: justify;
				/* 知识点5：文本格式化属性控制文本格式
				 行高属性line-height：文本垂直效果
				 使用方式：1.高度属性：属性值一致
				          2.在高度属性上加行高属性：属性值一致
				 */
				border: 1px solid red;
				height: 100px;
				li ne-height: 100px;
				/* 补充：文本对齐和行高属于对齐/间隙：字符和单词之间距离 */
				/* 知识点6：letter-spacing:设置字符之间间隙
				   知识点7  word-spacing: 设置单词之间间隙
							; */
				lett er-spacing: 10px;
				word-spacing:10px;			
			}
			
			 #a{ /*权值：100 */
				color: #000;
			}
			  a.c1{ /*权值：11 */
			       /* 知识点8：text-decoration 修饰超链接样式
					使用方法：与通配符一起使用，设置全局页面超链接样式
					属性值：none/去下划线
					        underline
							line-through
					*/
				font-size: 20px;
				text-deco ration: line-through;
				/* 知识点9：text-shadow 修饰文本阴影 
				    属性值：x轴 Y轴 blur模糊距离 color
				*/
			   text-shadow: 2px 2px 2px red;
			}
			p{
				border: 1px solid red;
				/* 知识点10：文本换行效果 
				  white-space: 文本换行属性
				  属性值：
			 nowrap 不换行/pre保存空格和回车/normal默认，空格合并，换行隐藏
				*/
				white-space: normal;
			}
		 </style>
	<head>
	<body>
		<!-- 需求：创建div同时指定别名，添加假文【tab】 
                   id选择器，通过加权找到div，添加颜色		
		-->
		<div id="a">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat odit voluptatum quidem natus, ea doloremque praesentium deserunt iusto dolore est inventore nam minima! Aperiam pariatur iste provident delectus modi velit?</div>
           <hr>
		   <h4>文本修饰效果</h4>
		   <!-- 文本修饰相关属性 
		     知识点8：text-decoration属性：设置超链接效果
			 -->
		   <a href="https://tsgzy.edu.cn/col/1654135135174/index.html" class="c1">实现跳转【方式：6种】</a>
		   <div style="height: 800px;""></div>
		   <marquee>
		   	<h4>处理文本效果</h4>
		   </marquee>
		   <p>Lorem   
		      ipsum dolor sit amet consectetur
			   adipisicing elit. Aliquid sunt
				aperiam similique aut tempora quod ut veniam, assumenda sint optio magnam minus, voluptates, dolores at ex facere aliquam culpa  </p>
	</body>
</html>